<script setup lang="ts" name="PanelBase">
import { mapState } from 'pinia'
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'
import { getNameValue, setNameValue, initNameValue, isNameSupported, isParticipant } from '../../utils/name'
import { getIdValue, setIdValue } from '../../utils/id'
import {
  hasProcessRef,
  hasProcessExecutable,
  hasVersionTag,
  getProcessNameValue,
  setProcessNameValue,
  getProcessIdValue,
  setProcessIdValue,
  getProcessExecutable,
  setProcessExecutable,
  getProcessVersionTag,
  setProcessVersionTag,
  getDescriptionValue,
  setDescriptionValue
} from '../../utils/base'
import { errorMessage } from '@/utils/message'
import EventEmitter from '@/utils/EventEmitter'
const form = ref({
  elementId: '',
  elementName: '',
  description: '',
  processId: '',
  processName: '',
  elementVersion: '',
  elementExecutable: true,
  isExpanded: false
})
const isProcess = ref(false)
const isNameVisible = ref(false)
const isVersionTagVisible = ref(false)
const isProcessExecutable = ref(false)
const isParticipantElement = ref(false)
const mapStates = computed(() => {
  return mapState(useModelerStore, ['getActive', 'getModeler'])
})

const initBase = () => {
  console.log('触发元素更新')
  isNameVisible.value = isNameSupported(mapStates.value.getActive())
  isParticipantElement.value = isParticipant(mapStates.value.getActive())
  isProcessExecutable.value = hasProcessExecutable(mapStates.value.getActive())
  isProcess.value = hasProcessRef(mapStates.value.getActive())
  isVersionTagVisible.value = hasVersionTag(mapStates.value.getActive())
  form.value.elementId = getIdValue(mapStates.value.getActive())
  form.value.description = getDescriptionValue(mapStates.value.getActive())
  if (isNameVisible.value) {
    form.value.elementName = getNameValue(mapStates.value.getActive())
  }
  if (isProcess.value) {
    form.value.processId = getProcessIdValue(mapStates.value.getActive())
    form.value.processName = getProcessNameValue(mapStates.value.getActive())
    form.value.elementVersion = getProcessVersionTag(mapStates.value.getActive())
    form.value.elementExecutable = getProcessExecutable(mapStates.value.getActive())
  }
}
const updateElementName = (value: string) => {
  setNameValue(mapStates.value.getActive(), value)
}
const updateDescription = (value: string) => {
  setDescriptionValue(mapStates.value.getActive(), value)
}
const updateElementId = (value: string) => {
  setIdValue(mapStates.value.getActive(), value)
}
const updateProcessName = (value: string) => {
  setProcessNameValue(mapStates.value.getActive(), value)
}
const updateProcessId = (value: string) => {
  setProcessIdValue(mapStates.value.getActive(), value)
}
const updateElementVersion = (value: string) => {
  const reg = /((\d|([1-9](\d*))).){2}(\d|([1-9](\d*)))/
  if (reg.test(value)) {
    setProcessVersionTag(mapStates.value.getActive(), value)
  } else {
    errorMessage('版本号必须符合语义化版本2.0.0 要点')
  }
}
const updateElementExecutable = (value: boolean) => {
  setProcessExecutable(mapStates.value.getActive(), value)
}

onBeforeUnmount(() => {
  EventEmitter.removeListener('element-update', initBase)
})

onMounted(() => {
  mapStates.value.getModeler().on('shape.added', (e) => {
    console.log(e.element.businessObject.id, '节点已添加完成')
    initNameValue(e.element)
  })
  initBase()
  EventEmitter.on('element-update', initBase)
})
</script>

<template>
  <el-collapse-item name="base-info">
    <template #title>
      <div class="collapse-header">
        <svg-icon icon="ri:file-list-2-fill"></svg-icon>
        <h2>常规信息</h2>
      </div>
    </template>
    <el-form-item :label="isParticipantElement ? '池ID' : 'ID'">
      <el-input v-model="form.elementId" maxlength="32" @change="updateElementId" />
    </el-form-item>
    <el-form-item v-if="isNameVisible" :label="isParticipantElement ? '池名称' : '节点名称'">
      <el-input v-model="form.elementName" maxlength="20" @change="updateElementName" />
    </el-form-item>
    <el-form-item v-if="isProcess" label="流程ID">
      <el-input v-model="form.processId" maxlength="32" @change="updateProcessId" />
    </el-form-item>
    <el-form-item v-if="isProcess" label="流程名称">
      <el-input v-model="form.processName" maxlength="20" @change="updateProcessName" />
    </el-form-item>
    <el-form-item label="描述">
      <el-input v-model="form.description" maxlength="32" @change="updateDescription" />
    </el-form-item>
    <el-form-item v-if="isVersionTagVisible" label="流程版本">
      <el-input v-model="form.elementVersion" maxlength="20" @change="updateElementVersion" />
    </el-form-item>
    <el-form-item v-if="isProcessExecutable" label="可执行">
      <el-switch v-model="form.elementExecutable" @change="updateElementExecutable" />
    </el-form-item>
    <!-- <el-form-item v-if="isSubProcess" label="状态">
      <el-switch v-model="form.isExpanded" active-text="展开" inactive-text="折叠" @change="updateElementExpanded" />
    </el-form-item> -->
  </el-collapse-item>
</template>

<style scoped lang="scss">
.el-collapse-item {
  :deep(.el-collapse-item__header) {

    .collapse-header {
      display: flex;
      flex: 1;
      align-items: center;
      padding: 0 12px;

      .el-icon {
        margin-right: 6px;
        font-size: 20px !important;
      }

      h2 {
        font-weight: bold;
        font-size: 14px;
      }
    }

    .el-icon {
      font-size: 18px;
    }
  }

  :deep(.el-collapse-item__content) {
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
  }
}
</style>
